<template>
  <div class="wrapper">
    <p>全部评论——————————————————————————————————————————————————</p>
    <div class="user" v-for="item in response" :key="item.comment_id">
      <!-- 用户头像 -->
      <div class="ooo">
        <div class="box">
          <div class="user-img">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="info">
            <div class="username">{{ item.nickname }}</div>
            <div class="pl">{{ item.text }}</div>
          </div>
          <div class="ti">2月前</div>
        </div>
        <div class="xh">♥ {{ item.is_author }}</div>
      </div>
      <!-- 回复 -->
      <div class="ooo" v-for="it in item.sub_comment" :key="it.comment_id">
        <div class="hf">
          <div class="user-img">
            <img :src="it.avatar" alt="" />
          </div>
          <div class="info">
            <div class="username">{{ it.nickname }}</div>
            <div class="pl">{{ it.text }}</div>
          </div>
          <div class="ti">2月前</div>
        </div>
        <div class="xh">♥ {{ it.is_author }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      response: [],
    };
  },
  created() {
    this.mounted();
  },
  methods: {
    async mounted() {
      const res = await this.$http.get(
        "http://douyin.bytedance.com/api/comment/list"
      );
      console.log(res, "数据");
      this.response = res.data.comments;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  padding: 20px;
  width: 100%;
  .user {
    width: 100%;
    border-bottom: 1px solid gray;
    display: flex;
    flex-direction: column;
    // background-color: aqua;
    .box {
      width: 100%;
      height: 70px;
      display: flex;
      .ti {
        width: 60px;
        height: 60px;
        line-height: 60px;
        margin-left: 600px;
      }
      .user-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        padding: 5px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .username {
          color: grey;
          font-size: 15px;
        }
        .pl {
          color: black;
          font-size: 18px;
        }
      }
    }
    .xh {
      height: 30px;
      padding-left: 75px;
      margin-top: 10px;
      font-size: 20px;
    }
  }

  // background-color: aqua;
  .hf {
    width: 100%;
    height: 70px;
    display: flex;
    padding-left: 100px;
    .ti {
      width: 60px;
      height: 60px;
      line-height: 60px;
      margin-left: 500px;
    }
    .user-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      padding: 5px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .username {
        color: grey;
        font-size: 15px;
      }
      .pl {
        color: black;
        font-size: 18px;
      }
    }
  }
  .hfxh {
    height: 30px;
    padding-left: 180px;
    margin-top: 10px;
    font-size: 20px;
  }
}
</style>